<template>
	<div class="step1">
		<ul class="uls">
			<li class="lis">
				<div class="div1">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.consignerInfo.consignerName">
						<el-form slot="reference">
							<el-form-item label="委托人名称" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('consignerName', '委托人名称', 'consignerInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3">
					<el-input
						@input="updateFunc"
						v-model="fundBaseInfo.consignerName"
						type="text"
						:disabled="isBaseDisabled"
						placeholder="请填写授权人名称"
					/>
					<div class="blurmsg" v-if="isCheck && !!!fundBaseInfo.consignerName">请填写授权人名称</div>
				</div>
			</li>

			<li class="lis">
				<div class="div1">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.consignerInfo.subjectType">
						<el-form slot="reference">
							<el-form-item label="主体类型" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('subjectType', '主体类型', 'consignerInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3">
					<el-select v-model="fundBaseInfo.subjectType" filterable clearable :disabled="isBaseDisabled" @change="typeClear">
						<el-option value="" label="--请选择--"></el-option>
						<el-option v-for="(item, index) in subjectType" :key="index + 'b'" :label="item.name" :value="item.name" />
					</el-select>
					<div class="blurmsg" v-if="isCheck && !!!fundBaseInfo.subjectType">请选择主体类型</div>
				</div>
			</li>

			<li class="lis" v-if="!!fundBaseInfo.subjectType">
				<div class="div1">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.consignerInfo.csrcType">
						<el-form slot="reference">
							<el-form-item label="证监会分类" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('csrcType', '证监会分类', 'consignerInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3">
					<el-select
						@change="updateFunc()"
						v-if="fundBaseInfo.subjectType == '机构'"
						v-model="fundBaseInfo.csrcType"
						filterable
						clearable
						:disabled="isBaseDisabled"
						placeholder="请选择证件类型"
					>
						<el-option value="" label="--请选择--"></el-option>
						<el-option
							v-for="(item, index) in commonPersonList.csrcTypeOrgan"
							:key="index + 'a'"
							:label="item.typeName"
							:value="item.typeCode"
						></el-option>
					</el-select>
					<el-select
						@change="updateFunc()"
						v-if="fundBaseInfo.subjectType == '个人'"
						v-model="fundBaseInfo.csrcType"
						filterable
						clearable
						:disabled="isBaseDisabled"
						placeholder="请选择证件类型"
					>
						<el-option value="" label="--请选择--"></el-option>
						<el-option
							v-for="(item, index) in commonPersonList.csrcTypePersonal"
							:key="index + 'a1'"
							:label="item.typeName"
							:value="item.typeCode"
						></el-option>
					</el-select>
					<el-select
						@change="updateFunc()"
						v-if="fundBaseInfo.subjectType == '产品'"
						v-model="fundBaseInfo.csrcType"
						filterable
						clearable
						:disabled="isBaseDisabled"
						placeholder="请选择证件类型"
					>
						<el-option value="" label="--请选择--"></el-option>
						<el-option
							v-for="(item, index) in commonPersonList.csrcTypeProduct"
							:key="index + 'a2'"
							:label="item.typeName"
							:value="item.typeCode"
						></el-option>
					</el-select>
					<div class="blurmsg" v-if="isCheck && !!!fundBaseInfo.csrcType">请选择证监会类型</div>
				</div>
			</li>

			<li class="lis" v-if="!!fundBaseInfo.subjectType">
				<div class="div1">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.consignerInfo.certificateType">
						<el-form slot="reference">
							<el-form-item label="证件类型" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('certificateType', '证件类型', 'consignerInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3">
					<el-select
						@change="updateFunc()"
						v-if="fundBaseInfo.subjectType == '机构'"
						v-model="fundBaseInfo.certificateType"
						filterable
						clearable
						:disabled="isBaseDisabled"
						placeholder="请选择证件类型"
					>
						<el-option value="" label="--请选择--"></el-option>
						<el-option
							v-for="(item, index) in commonPersonList.idTypeOrgan"
							:key="index + 'a'"
							:label="item.typeName"
							:value="item.typeCode"
						></el-option>
					</el-select>
					<el-select
						@change="updateFunc()"
						v-if="fundBaseInfo.subjectType == '个人'"
						v-model="fundBaseInfo.certificateType"
						filterable
						clearable
						:disabled="isBaseDisabled"
						placeholder="请选择证件类型"
					>
						<el-option value="" label="--请选择--"></el-option>
						<el-option
							v-for="(item, index) in commonPersonList.idType"
							:key="index + 'a1'"
							:label="item.typeName"
							:value="item.typeCode"
						></el-option>
					</el-select>
					<el-select
						@change="updateFunc()"
						v-if="fundBaseInfo.subjectType == '产品'"
						v-model="fundBaseInfo.certificateType"
						filterable
						clearable
						:disabled="isBaseDisabled"
						placeholder="请选择证件类型"
					>
						<el-option value="" label="--请选择--"></el-option>
						<el-option
							v-for="(item, index) in commonPersonList.idTypeProduct"
							:key="index + 'a2'"
							:label="item.typeName"
							:value="item.typeCode"
						></el-option>
					</el-select>
					<div class="blurmsg" v-if="isCheck && !!!fundBaseInfo.certificateType">请选择证件类型</div>
				</div>
			</li>

			<li class="lis">
				<div class="div1">
					<el-popover
						placement="top-start"
						width="200"
						trigger="hover"
						:content="$store.getters.hoverPerty.consignerInfo.certificateNumber"
					>
						<el-form slot="reference">
							<el-form-item label="证件号码" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('certificateNumber', '证件号码', 'consignerInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3">
					<el-input
						@input="updateFunc"
						v-model="fundBaseInfo.certificateNumber"
						type="text"
						:disabled="isBaseDisabled"
						placeholder="请填写证件号码"
					/>
					<div class="blurmsg" v-if="isCheck && !!!fundBaseInfo.certificateNumber">请填写证件号码</div>
				</div>
			</li>

			<li class="lis">
				<div class="div1">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.consignerInfo.peopleMax">
						<el-form slot="reference">
							<el-form-item label="人行大类" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('peopleMax', '人行大类', 'consignerInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3">
					<el-select
						@change="updateFunc(), (fundBaseInfo.peopleMin = '')"
						v-model="fundBaseInfo.peopleMax"
						:disabled="isBaseDisabled"
						filterable
						clearable
					>
						<el-option value="" label="--请选择--"></el-option>
						<el-option
							v-for="(item, index) in commonPersonList.peopleMax"
							:key="index + 'b1'"
							:label="item.typeName"
							:value="item.typeCode"
						/>
					</el-select>
					<div class="blurmsg" v-if="isCheck && !!!fundBaseInfo.peopleMax">请选择人行大类</div>
				</div>
			</li>

			<li class="lis" v-if="['1306', '1307'].includes(fundBaseInfo.peopleMax)">
				<div class="div1">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.consignerInfo.peopleMin">
						<el-form slot="reference">
							<el-form-item label="人行小类" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('peopleMin', '人行小类', 'consignerInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3" v-if="fundBaseInfo.peopleMax == '1306'">
					<el-select @change="updateFunc()" v-model="fundBaseInfo.peopleMin" filterable clearable :disabled="isBaseDisabled">
						<el-option value="" label="--请选择--"></el-option>
						<el-option
							v-for="(item, index) in commonPersonList.peopleMinNoBank"
							:key="index + 'b2'"
							:label="item.typeName"
							:value="item.typeCode"
						/>
					</el-select>
					<div class="blurmsg" v-if="isCheck && !!!fundBaseInfo.peopleMin">请选择人行小类</div>
				</div>
				<div class="div3" v-if="fundBaseInfo.peopleMax == '1307'">
					<el-select @change="updateFunc()" v-model="fundBaseInfo.peopleMin" filterable clearable :disabled="isBaseDisabled">
						<el-option value="" label="--请选择--"></el-option>
						<el-option
							v-for="(item, index) in commonPersonList.peopleMinSpv"
							:key="index + 'b3'"
							:label="item.typeName"
							:value="item.typeCode"
						/>
					</el-select>
					<div class="blurmsg" v-if="isCheck && !!!fundBaseInfo.peopleMin">请选择人行小类</div>
				</div>
			</li>

			<li class="lis">
				<div class="div1">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.consignerInfo.city">
						<el-form slot="reference">
							<el-form-item label="城市" required>
								<span v-if="['6'].includes(dataType)">
									<span
										style="color: red"
										v-if="publicCompare('city', '城市', 'consignerInfo') || publicCompare('province', '省份', 'consignerInfo')"
										>(未复核)</span
									>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3">
					<div style="display: flex">
						<el-select
							v-model="fundBaseInfo.province"
							filterable
							clearable
							placeholder="请选择省份"
							@change="area"
							:disabled="isBaseDisabled"
						>
							<el-option value="" label="--请选择--"></el-option>
							<el-option v-for="item in provinceList" :key="item.areachiname" :label="item.areachiname" :value="item.areachiname">
							</el-option>
						</el-select>
						<el-select
							@change="updateFunc()"
							v-model="fundBaseInfo.city"
							filterable
							clearable
							placeholder="请选择城市"
							:disabled="isBaseDisabled || !fundBaseInfo.province"
						>
							<el-option value="" label="--请选择--"></el-option>
							<el-option v-for="item in cityList" :key="item.areachiname" :label="item.areachiname" :value="item.areachiname">
							</el-option>
						</el-select>
					</div>
					<div class="blurmsg" v-if="isCheck && !!!fundBaseInfo.province">请选择省份</div>
					<div class="blurmsg" v-if="isCheck && fundBaseInfo.province && !!!fundBaseInfo.city && cityList.length">请选择城市</div>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
import { getEnum, jsonArray } from '@/api/productApi/file'
import { getAreaList, consignerInfo } from '@/api/productApi/infoMain'
import { publicCompare } from '@/views/infoMain/specialList/components/dataCheck'
import { consignReview } from '@/views/infoMain/specialList/components/dataReview'
export default {
	props: {
		setpFunc: {
			type: Function,
			default: Function
		},
		fundSysCode: {
			type: String,
			default: ''
		},
		dataType: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			fundBaseInfo: {},
			commonPersonList: [],
			cuserId: '',
			isCheck: false,
			isBaseDisabled: false,
			subjectType: [
				{ type: '机构', name: '机构' },
				{ type: '个人', name: '个人' },
				{ type: '产品', name: '产品' }
			],
			cityList: [], // 市
			provinceList: [], // 省
			publicCompare
		}
	},
	mounted() {
		this.getUserOpList()
		this.getAreaListData()
		setTimeout(() => {
			this.area()
		})
	},
	methods: {
		clearData() {
			this.fundBaseInfo = {
				consignerName: '',
				subjectType: '',
				csrcType: '',
				certificateType: '',
				certificateNumber: '',
				peopleMax: '',
				peopleMin: '',
				province: '',
				city: ''
			}
		},

		// 重新申请将数据集中在store
		updateStoreData() {
			this.$store.state.fundStep.specialtTotalData.productFundApply.consignerInfo = this.fundBaseInfo
		},

		// 父组件调用的方法
		isBaseDisabledCom(data, msgShow) {
			this.isBaseDisabled = data
			this.isCheck = msgShow
		},

		edit(data) {
			this.fundBaseInfo = data ? jsonArray(data) : {}
		},

		// 完善信息切换步骤时保存切换前页面数据
		async switchingSteps() {
			const params = { productFundApply: {}, fundRaiseType: '2' }
			params.productFundApply.consignerInfo = this.fundBaseInfo
			params.productFundApply.consignerInfo.city = this.fundBaseInfo.city
			params.productFundApply.consignerInfo.province = this.fundBaseInfo.province
			params.fundSysCode = this.fundSysCode
			await consignerInfo(params).then(res => {
				if (res.msgCode === 'Y') {
					this.$emit('setpFunc', '1', this.fundSysCode, '', 1)
				}
			})
			return true
		},

		ValidationRequired() {
			return consignReview(this.fundBaseInfo, this.cityList)
		},

		// 新增:【保存】和【下一步】
		startDown(type) {
			this.isCheck = true
			this.CustomtextComfirm(() => {
				const params = { productFundApply: {}, fundRaiseType: '2' }
				params.productFundApply.consignerInfo = this.fundBaseInfo
				params.productFundApply.consignerInfo.city = this.fundBaseInfo.city
				params.productFundApply.consignerInfo.province = this.fundBaseInfo.province
				params.fundSysCode = this.fundSysCode
				consignerInfo(params).then(res => {
					if (res.msgCode === 'Y') {
						if (type === '下一步') {
							this.$emit('setpFunc', '1', this.fundSysCode, '', 0)
						} else {
							this.$emit('setpFunc', '1', this.fundSysCode, '', 1)
						}
						this.$message({ type: 'success', message: res.msg })
					}
				})
			}, `${!consignReview(this.fundBaseInfo, this.cityList).length ? '此操作将永久提交已编辑数据，是否继续' : `必填项 “ ${consignReview(this.fundBaseInfo, this.cityList).join('、')} ” 未填写，是否确认提交`}？`)
		},

		area() {
			// 获取市区数据
			if (!this.fundBaseInfo.province) {
				this.fundBaseInfo.city = ''
                this.cityList = []
			}
			this.getAreaListData(this.fundBaseInfo.province)
			this.updateFunc()
		},

		updateFunc() {
			this.$forceUpdate()
		},

		typeClear() {
			// 清除联动字段
			this.fundBaseInfo.certificateType = ''
			this.fundBaseInfo.csrcType = ''
			this.updateFunc()
		},

		getAreaListData(value) {
			// 获取地区数据
			getAreaList({ provinceListValue: value }).then(res => {
				if (res.msgCode === 'Y') {
					if (value) {
						this.cityList = res.data.body.cityList
						if (!this.cityList.some(item => item.areachiname === this.fundBaseInfo.city)) {
							this.fundBaseInfo.city = ''
						}
					} else {
						this.provinceList = res.data.body.provinceList
					}
				}
			})
		},

		// 获取枚举数据
		getUserOpList() {
			getEnum([
				'peopleMax',
				'peopleMinNoBank',
				'peopleMinSpv',
				'csrcTypeOrgan',
				'csrcTypePersonal',
				'csrcTypeProduct',
				'idType',
				'idTypeOrgan',
				'idTypeProduct'
			]).then(res => {
				if (res.msgCode === 'Y') {
					this.commonPersonList = res.data.body
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped >
</style>
